import 'package:common_utils/common_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
import 'package:xinxuan/common/appbar_util.dart';
import 'package:xinxuan/common/button_util.dart';
import 'package:xinxuan/common/goods_swiper_custom_pagination.dart';
import 'package:xinxuan/common/network_image_util.dart';
import 'package:xinxuan/common/scroll_configuration_common.dart';
import 'package:xinxuan/common/swiper_util.dart';
import 'package:xinxuan/controllers/home_controller/good_detail_page_controller.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:x_common_utils/utils/inkWell_util.dart';
import 'package:xinxuan/utils/color_util.dart';
import 'package:xinxuan/vo/good_detail_vo.dart';

class GoodDetailPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return GetBuilder<GoodDetailPageController>(
      init: GoodDetailPageController(),
      builder: (controller) {
        return Scaffold(
          backgroundColor: pageBgColor,
          appBar: AppBarUtil(
            title: '商品详情',
            backgroundColor: pageBgColor,
          ),
          body: controller.goodDetailData.value.id! <= 0 ? Container() : ScrollConfigurationCommon(child: ListView(
            padding: EdgeInsets.zero,
            children: [
              SwiperUtil(
                images: controller.goodDetailData.value.images ?? [], 
                width: 375.w, 
                height: 375.w,
                pagination: GoodsSwiperCustomPagination(length: controller.goodDetailData.value.images!.length),
              ),
              Container(
                color: bgWhiteColor,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      height: 51.h,
                      padding: EdgeInsets.symmetric(horizontal: 16.w),
                      child: Row(
                        children: [
                          Text.rich(
                            TextSpan(
                              text: '¥',
                              style: TextStyle(
                                color: mainTextColor,
                                fontSize: 14.sp,
                                fontWeight: FontWeight.bold
                              ),
                              children: [
                                TextSpan(
                                  text: '${controller.goodDetailData.value.price}',
                                  style: TextStyle(
                                    color: mainTextColor,
                                    fontSize: 24.sp,
                                    fontWeight: FontWeight.bold
                                  ),
                                )
                              ]
                            )
                          ),
                          SizedBox(width: 12.w),
                          Text(
                            '${double.parse(controller.goodDetailData.value.dispatchingFee ?? '0') <= 0 ? '' : '+¥${controller.goodDetailData.value.dispatchingFee}调度费'}' + '+${controller.goodDetailData.value.integral}积分',
                            style: TextStyle(
                              color: mainTextColor,
                              fontSize: 12.sp
                            ),
                          )
                        ],
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(horizontal: 16.w),
                      child: Text(
                        '${controller.goodDetailData.value.title}',
                        style: TextStyle(
                          color: textBlackColor,
                          fontSize: 16.sp,
                          fontWeight: FontWeight.bold
                        ),
                      ),
                    ),
                    SizedBox(height: 12.h)
                  ],
                ),
              ),
              SizedBox(height: 10.h),
              Container(
                child: _skuBar(controller, controller.goodDetailData.value, controller.goodDetailData.value.id!),
              ),
              SizedBox(height: 10.h),
              Container(
                color: bgWhiteColor,
                child: Column(
                  children: [
                    Container(
                      height: 60.h,
                      alignment: Alignment.center,
                      child: Image.asset(
                        'assets/icons/icon_goods_detail_bar.png',
                        width: 144.w,
                        height: 20.h,
                        fit: BoxFit.cover,
                      ),
                    ),
                    HtmlWidget(
                      '${controller.goodDetailData.value.description}',
                      customStylesBuilder: (element) {
                        return {
                          'vertical-align': 'middle'
                        };
                      },
                    )
                  ],
                )
              )
            ],
          )),
          bottomNavigationBar: BottomAppBar(
            elevation: 0,
            child: Obx(() => Container(
              height: 56.h,
              padding: EdgeInsets.symmetric(horizontal: 12.w),
              alignment: Alignment.center,
              child: getBottomNavigationBarBtn(controller)
            )),
          ),
        );
      },
    );
  }

  /// 规格
  Widget _skuBar(GoodDetailPageController goodDetailPageController, GoodDetailData goodDetailData, int goodId) {
    return InkWellUtil.shakeProofInkWell(Obx(() => Container(
      height: 44.h,
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      color: bgWhiteColor,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              Text(
                '选择',
                style: TextStyle(
                  color: textSubtitleColor,
                  fontSize: 12.sp
                ),
              ),
              SizedBox(width: 12.w),
              !TextUtil.isEmpty(goodDetailPageController.sukItem.value.specIds) ? Text(
                '${goodDetailPageController.sukItem.value.specStr}',
                style: TextStyle(
                  color: textBlackColor,
                  fontSize: 14.sp
                ),
              ) : Row(
                children: goodDetailData.attributes!.asMap().keys.map((index) {
                  Attributes item = goodDetailData.attributes![index];
                  return Text.rich(
                    TextSpan(
                      text: '${item.title}',
                      style: TextStyle(
                        color: textBlackColor,
                        fontSize: 14.sp
                      ),
                      children: [
                        TextSpan(
                          text: (index + 1) < goodDetailData.attributes!.length ? '/' : '',
                          style: TextStyle(
                            color: textBlackColor,
                            fontSize: 14.sp
                          ),
                        )
                      ]
                    )
                  );
                }).toList(),
              )
            ],
          ),
          Image.asset(
            'assets/icons/icon_arrow_right.png',
            width: 14.w,
            height: 14.w,
          )
        ],
      ),
    )), () {
      _showSpecificationsBottomSheet(goodDetailPageController: goodDetailPageController, goodDetailData: goodDetailData);
    });
  }

  /// 显示规格弹窗
  _showSpecificationsBottomSheet({ required GoodDetailPageController goodDetailPageController, required GoodDetailData goodDetailData }) {
    Get.bottomSheet(StatefulBuilder(
      builder: (context, setButtomSheetState) {
        return Container(
          height: 458.h + ScreenUtil().bottomBarHeight,
          decoration: BoxDecoration(
            color: bgWhiteColor,
            borderRadius: BorderRadius.vertical(top: Radius.circular(12.w))
          ),
          child: Column(
            children: [
              Container(
                padding: EdgeInsets.only(top: 12.h, right: 16.w, bottom: 8.h),
                alignment: Alignment.centerRight,
                child: InkWellUtil.shakeProofInkWell(Image.asset(
                  'assets/icons/icon_close_w.png',
                  width: 20.w,
                  height: 20.w,
                ), () {
                  Get.back();
                }),
              ),
              Container(
                padding: EdgeInsets.symmetric(horizontal: 12.w),
                child: Container(
                  padding: EdgeInsets.only(left: 4.w, right: 39.w, bottom: 20.h),
                  decoration: BoxDecoration(
                    border: Border(
                      bottom: BorderSide(
                        width: .5,
                        color: lineColor
                      )
                    )
                  ),
                  child: Row(
                    children: [
                      NetworkImageUtil(
                        url: goodDetailData.images![0], 
                        width: 86.w, 
                        height: 86.w,
                        borderRadius: 5.w,
                      ),
                      SizedBox(width: 12.w),
                      Expanded(child: Container(
                        constraints: BoxConstraints(
                          minHeight: 86.w
                        ),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text.rich(
                              TextSpan(
                                text: '¥',
                                style: TextStyle(
                                  fontSize: 14.sp,
                                  fontWeight: FontWeight.bold,
                                  color: mainTextColor
                                ),
                                children: [
                                  TextSpan(
                                    text: TextUtil.isEmpty(goodDetailPageController.sukItem.value.specIds) ? '${goodDetailData.price}' : goodDetailPageController.sukItem.value.price,
                                    style: TextStyle(
                                      fontSize: 18.sp,
                                      fontWeight: FontWeight.bold,
                                      color: mainTextColor
                                    )
                                  )
                                ]
                              )
                            ),
                            SizedBox(height: 4.h),
                            Text(
                              '${double.parse(goodDetailPageController.goodDetailData.value.dispatchingFee ?? '0') <= 0 ? '' : '+¥${goodDetailPageController.goodDetailData.value.dispatchingFee}调度费'}${TextUtil.isEmpty(goodDetailPageController.sukItem.value.specIds) ? '+${goodDetailPageController.goodDetailData.value.integral}积分' : '+${goodDetailPageController.sukItem.value.integral}积分'}',
                              style: TextStyle(
                                color: mainTextColor,
                                fontSize: 12.sp
                              ),
                            ),
                            SizedBox(height: 8.h),
                            goodDetailData.stock! >= 0 ? Text(
                              TextUtil.isEmpty(goodDetailPageController.sukItem.value.specIds) ? '库存：${goodDetailData.stock}' : '库存：${goodDetailPageController.sukItem.value.quantity}',
                              style: TextStyle(
                                color: textSubtitleColor,
                                fontSize: 12.sp
                              ),
                            ) : Container()
                          ],
                        ),
                      ))
                    ],
                  ),
                ),
              ),
              Expanded(child: Container(
                padding: EdgeInsets.symmetric(horizontal: 12.w),
                margin: EdgeInsets.only(top: 16.h),
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 4.w),
                  child: ScrollConfigurationCommon(child: ListView(
                    children: [
                      Container(
                        padding: EdgeInsets.only(bottom: 4.h),
                        decoration: BoxDecoration(
                          border: Border(
                            bottom: BorderSide(
                              width: .5,
                              color: lineColor
                            )
                          )
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: goodDetailData.attributes!.asMap().keys.map((index) {
                            Attributes item = goodDetailData.attributes![index];
                            return Container(
                              margin: EdgeInsets.only(bottom: 16.h),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    '${item.title}',
                                    style: TextStyle(
                                      color: textBlackColor,
                                      fontSize: 14.sp
                                    ),
                                  ),
                                  SizedBox(height: 12.h),
                                  Wrap(
                                    runSpacing: 12.w,
                                    spacing: 12.w,
                                    children: item.specs!.map((specItem) {
                                      return InkWellUtil.shakeProofInkWell(Container(
                                        padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 6.h),
                                        decoration: BoxDecoration(
                                          color: goodDetailPageController.skuArr[index] == specItem.id ? bgPinkColor : pageBgColor,
                                          borderRadius: BorderRadius.circular(30.w),
                                          // border: Border.all(
                                          //   width: .5,
                                          //   color: goodDetailPageController.skuArr[index] == specItem.id ? bgMainColor : pageBgColor
                                          // )
                                        ),
                                        constraints: BoxConstraints(
                                          minWidth: 70.w
                                        ),
                                        child: Text(
                                          '${specItem.title}',
                                          textAlign: TextAlign.center,
                                          style: TextStyle(
                                            fontSize: 12.sp,
                                            color: goodDetailPageController.skuArr[index] == specItem.id ? mainTextColor : textBlackColor
                                          ),
                                        ),
                                      ), () { 
                                        goodDetailPageController.changeSku(index, specItem.id!);
                                        setButtomSheetState((){});
                                      });
                                    }).toList(),
                                  )
                                ],
                              ),
                            );
                          }).toList(),
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 4.w, vertical: 12.h),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              '数量',
                              style: TextStyle(
                                fontSize: 12.sp,
                                color: textBlackColor
                              ),
                            ),
                            Row(
                              children: [
                                InkWellUtil.shakeProofInkWell(Container(
                                  child: Image.asset(
                                    'assets/icons/icon_move.png',
                                    width: 14.w,
                                    height: 14.w,
                                    fit: BoxFit.cover,
                                  ),
                                ), () {
                                  if (goodDetailPageController.buyNum.value > 1) {
                                    goodDetailPageController.buyNum.value--;
                                    setButtomSheetState((){});
                                  }
                                }),
                                Container(
                                  width: 48.w,
                                  height: 28.h,
                                  margin: EdgeInsets.symmetric(horizontal: 8.w),
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color: pageBgColor,
                                    borderRadius: BorderRadius.circular(28.h)
                                  ),
                                  child: Text(
                                    '${goodDetailPageController.buyNum.value}',
                                    style: TextStyle(
                                      color: textBlackColor,
                                      fontSize: 14.sp
                                    ),
                                  ),
                                ),
                                InkWellUtil.shakeProofInkWell(Container(
                                  child: Image.asset(
                                    'assets/icons/icon_add.png',
                                    width: 14.w,
                                    height: 14.w,
                                    fit: BoxFit.cover,
                                  ),
                                ), () {
                                  goodDetailPageController.buyNum.value++;
                                  setButtomSheetState((){});
                                })
                              ],
                            )
                          ],
                        ),
                      )
                    ],
                  )),
                ),
              )),
              Container(
                height: 56.h + ScreenUtil().bottomBarHeight,
                padding: EdgeInsets.only(bottom: ScreenUtil().bottomBarHeight, left: 12.w, right: 12.w),
                alignment: Alignment.center,
                child: getButtomBtn(goodDetailPageController)
              )
            ],
          ),
        );
      }
    ));
  }

  getButtomBtn(GoodDetailPageController goodDetailPageController) {
    if (goodDetailPageController.goodDetailData.value.stock! >= 0) {
      if (!TextUtil.isEmpty(goodDetailPageController.sukItem.value.specIds) && goodDetailPageController.sukItem.value.quantity! < goodDetailPageController.buyNum.value) {
        return ButtonUtil(
          text: '库存不足', 
          fontSize: 14.sp, 
          borderRadius: 18.w, 
          height: 36.h, 
          textColor: textSubtitleColor,
          bgColors: [
            bgDisplayColor,
            bgDisplayColor
          ],
          onTop: () {}
        );
      } else {
        return ButtonUtil(
          text: '确定', 
          fontSize: 14.sp, 
          borderRadius: 18.w, 
          height: 36.h, 
          onTop: () {
            goodDetailPageController.jumpConfirmOrder(isSheet: true);
          }
        );
      }
    } else {
      return ButtonUtil(
        text: '确定', 
        fontSize: 14.sp, 
        borderRadius: 18.w, 
        height: 36.h, 
        onTop: () {
          goodDetailPageController.jumpConfirmOrder(isSheet: true);
        }
      );
    }
  }

  getBottomNavigationBarBtn(GoodDetailPageController goodDetailPageController) {
    if (goodDetailPageController.goodDetailData.value.stock! >= 0) {
      if (!TextUtil.isEmpty(goodDetailPageController.sukItem.value.specIds) && goodDetailPageController.sukItem.value.quantity! < goodDetailPageController.buyNum.value) {
        return ButtonUtil(
          text: '库存不足', 
          fontSize: 14.sp, 
          borderRadius: 18.w, 
          height: 36.h, 
          textColor: textSubtitleColor,
          bgColors: [
            bgDisplayColor,
            bgDisplayColor
          ],
          onTop: () {}
        );
      } else {
        return ButtonUtil(
          text: '立即购买', 
          fontSize: 14.sp,
          borderRadius: 18.w, 
          height: 36.h, 
          onTop: () {
            // controller.jumpConfirmOrder(isSheet: false);
            _showSpecificationsBottomSheet(goodDetailPageController: goodDetailPageController, goodDetailData: goodDetailPageController.goodDetailData.value);
          }
        );
      }
    } else {
      return ButtonUtil(
        text: '立即购买', 
        fontSize: 14.sp,
        borderRadius: 18.w, 
        height: 36.h, 
        onTop: () {
          // controller.jumpConfirmOrder(isSheet: false);
          _showSpecificationsBottomSheet(goodDetailPageController: goodDetailPageController, goodDetailData: goodDetailPageController.goodDetailData.value);
        }
      );
    }
  }
}